<template>
  <div>
    <!-- 顶部的元素 -->
    <div style="height: 100px;">
      <!-- logo图片 -->
      <div class="top-item-box" style="text-align: right">
        <span class="logo-class">蓝剑源</span>
      </div>

      <!-- 菜单栏 -->
      <div class="top-item-box">
        <el-button class="button-class" type="text">我的音乐</el-button>
      </div>

      <!-- 搜索框 -->
      <div class="top-item-box">
        <el-input placeholder="音乐/歌单/MV/用户" class="input-with-select-1">
          <el-button icon="el-icon-search" slot="append"><span style="color: #ffffff">搜索</span></el-button>
        </el-input>
      </div>

      <!-- 其他按钮 -->
      <div class="top-item-box" style="text-align: left;">
        <a class="other-item">联系我们</a>
        <a class="other-item">商业合作</a>
        <el-button class="other-item" type="text" @click="toLogin">登录</el-button>
      </div>

    </div>

    <!-- 下面菜单栏 -->
    <div class="bottom-box">
      <div class="bottom-button-box">
        <div class="bottom-in-button-box">
          <el-button class="button-class" :style="{color: selectMenuId == menu.id ? '#FFFFFF' : '#000000'}" type="text"
                     @click="clickButton(menu.id)" v-for="(menu,key) in menuList" :key="key">{{ menu.name }}
          </el-button>
        </div>
      </div>

    </div>

    <!-- 登录弹窗 -->
    <login v-if="showLogin" :showLogin="showLogin"></login>

  </div>
</template>

<script>
import login from '../views/login/index'

export default {
  name: "top",
  components: {
    login
  },
  data() {
    return {
      /** 菜单列表 */
      menuList: [
        {id: 1, name: '首页'},
        {id: 2, name: '排行榜'},
        {id: 3, name: '歌手'},
        {id: 4, name: '分类歌单'},
        {id: 5, name: 'MV'},
        {id: 6, name: '新歌'},
        {id: 7, name: '听歌识曲'}
      ],
      /** 选中的菜单id，默认是首页 */
      selectMenuId: 1,
      /** 是否展示登录页 */
      showLogin: false

    }
  },
  methods: {
    /** 跳转到登录页 */
    toLogin() {
      console.log('进来了')
      this.showLogin = true
    },
    /** 点击菜单 */
    clickButton(menuId) {
      this.selectMenuId = menuId
    }
  }
}
</script>

<style lang="scss" scoped>

.top-item-box {
  width: 25%;
  height: 100%;
  float: left;

  .button-class {
    font-size: 35px;
    color: black;
    height: 100%;
  }

  .logo-class {
    display: inline-block;
    position: relative;
    line-height: 100px;
    font-size: 35px;
  }

  .logo-class::before {
    position: absolute;
    left: -110px;
    height: 100px;
    width: 100px;
    content: '';
    display: block;
    background-image: url("../assets/images/logo.png");
    background-size: 100% 100%;
  }

  .input-with-select-1 {
    width: 355px;
    margin-top: 30px;
  }

  .input-with-select-1 > > > .el-input__inner {
    padding: 5px 0 5px 10px;
    border-radius: 10px;
  }

  .input-with-select-1 > > > .el-input-group__append {
    padding-right: 0;
    margin-right: 0;
    right: 58px;
    opacity: 0.5;
    background: none;
    border: 0;
  }

  .other-item {
    position: relative;
    top: 27px;
    font-size: 18px;
    margin: 0 5px;
  }

}

.bottom-box {
  padding: 0 150px;

  .bottom-button-box {
    height: 50px;
    border-top: 1px solid #42b983;

    .button-class {
      width: 50px;
      height: 50px;
      font-size: 18px;
      margin: 0 20px;
    }

    .button-class:hover {
      color: #FFFFFF;
    }


    .bottom-in-button-box {
      padding: 0 250px;
      text-align: left;
      background-color: #42b983;
    }
  }
}


</style>
